<tr class="table-items-row" [class.expanded]="expanded">
    <td class="cell-label2">
        <span class="badge rounded-pill badge-{{ event.flowState.status | sqxRuleClass }}">{{ event.flowState.status }}</span>
    </td>

    <td class="cell-40">
        <span class="truncate">{{ event.flowState.description }}</span>
    </td>

    <td class="cell-60">
        <div class="d-flex flex-row align-items-center overflow-hidden">
            @for (item of branchItems; track item.id) {
                <sqx-rule-element
                    disabled="true"
                    [elementInfo]="$any(availableSteps[item.step.step.stepType])"
                    [elementType]="item.step.step.stepType"
                    [label]="item.step.name"
                    showDescription="false"
                    showName="false"
                    size="sm" />
                <i class="icon-caret-right ms-2 me-2"></i>
            }
        </div>
    </td>

    <td class="cell-time">
        <small class="item-modified">{{ event.flowState.created | sqxFromNow }}</small>
    </td>

    <td class="cell-actions">
        <button class="btn btn-outline-secondary btn-expand" [class.expanded]="expanded" (click)="expandedChange.emit()" type="button">
            <span class="hidden">{{ "common.settings" | sqxTranslate }}</span> <i class="icon-settings"></i>
        </button>
    </td>
</tr>

@if (expanded) {
    <tr>
        <td class="details" colspan="5">
            <div class="event-header event-section">
                <h4>{{ "common.details" | sqxTranslate }}</h4>
            </div>

            <div class="row g-0 event-stats event-section align-items-center">
                <div class="col">
                    <label>{{ "common.created" | sqxTranslate }}:&nbsp;</label>
                    <span class="text-sm"> {{ event.flowState.created.toISOString() }} </span>
                </div>

                <div class="col">
                    <label>{{ "rules.ruleEvents.nextAttemptLabel" | sqxTranslate }}:&nbsp;</label>
                    <span class="text-sm">
                        @if (event.flowState.nextRun) {
                            {{ event.flowState.nextRun | sqxFromNow }}
                        } @else {
                            -
                        }
                    </span>
                </div>

                <div class="col-3 text-end">
                    @if (event.canDelete) {
                        <button
                            class="btn btn-danger me-1"
                            confirmRememberKey="cancelRuleEvent"
                            confirmText="i18n:rules.ruleEvents.cancelConfirmText"
                            confirmTitle="i18n:rules.ruleEvents.cancelConfirmTitle"
                            (sqxConfirmClick)="cancel.emit()"
                            type="button">
                            {{ "common.cancel" | sqxTranslate }}
                        </button>
                    }

                    @if (event.canUpdate) {
                        <button class="btn btn-success" (click)="enqueue.emit()" type="button">
                            {{ "rules.ruleEvents.enqueue" | sqxTranslate }}
                        </button>
                    }
                </div>
            </div>

            <div class="event-section">
                <sqx-state-details [availableSteps]="availableSteps" [state]="event.flowState" [branchItems]="branchItems" />
            </div>
        </td>
    </tr>
}

<tr class="spacer"></tr>
